<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>监控</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script src="layui/echarts.min.js"></script>
</head>
<style>
    .ws-container {
        padding-top: 260px;
        min-height: calc(100vh - 210px);
    }

    h1 {
        text-align: center;
        margin-bottom: 20px;
    }

    .ws-header {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        height: 200px;
        background-color: #fff;
        padding-top: 20px;
        z-index: 777;
        border-bottom: 1px solid
    }

    .ws-menu {
        width: 240px;
        position: fixed;
        z-index: 777;
        min-height: 0;
        border-top: none;
        border-bottom: none;
        overflow: hidden;
        background-color: #fff;
        box-shadow: none;
        border-left: none;
    }

    .ws-content {
        position: relative;
        margin: 5px 0 5px 260px;
        line-height: 1.8;
        box-sizing: border-box;
        min-height: calc(100vh - 210px);
    }

    .main {
        height: 300px;
    }
</style>
<body>
<div class="ws-header">
    <div class="layui-container">
        <div class="layui-row layui-col-space15">
            <form class="layui-form layui-form-pane">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <div class="layui-form-item">
                            <label class="layui-form-label">连接名称</label>
                            <div class="layui-input-block">
                                <input
                                        type="text"
                                        name="dbName"
                                        autocomplete="off"
                                        placeholder="请输入连接名称"
                                        lay-reqtext="请输入连接名称"
                                        lay-verify="required"
                                        class="layui-input"
                                />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input
                                        type="text"
                                        name="username"
                                        autocomplete="off"
                                        placeholder="请输入用户名"
                                        lay-reqtext="请输入用户名"
                                        lay-verify="required"
                                        class="layui-input"
                                />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <div class="layui-form-item">
                            <label class="layui-form-label">连接地址</label>
                            <div class="layui-input-block">
                                <input
                                        type="text"
                                        name="url"
                                        autocomplete="off"
                                        placeholder="请输入连接地址"
                                        lay-reqtext="请输入连接地址"
                                        lay-verify="required"
                                        class="layui-input"
                                />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input
                                        type="password"
                                        name="password"
                                        placeholder="请填写密码"
                                        lay-verify="required"
                                        class="layui-input" lay-reqtext="请填写密码" autocomplete="off" lay-affix="eye"
                                />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn" lay-submit lay-filter="save">
                        确认
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">
                        重置
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="layui-container ws-container">
    <div class="layui-panel ws-menu">
        <ul class="layui-menu" id="menu">
        </ul>
    </div>
    <div class="ws-content" id="main">


    </div>
</div>

<script src="layui/layui.js"></script>

<script type="text/javascript">

    layui.use(['form', 'jquery', 'layer'], function () {
        var $ = layui.$
        var form = layui.form;
        var layer = layui.layer;

        window.initDb = function () {
            $.get("http://localhost:9981/app/getList", function (res) {
                if (res.code == 200) {
                    var data = res.data;
                    $.each(data, function (index, value) {
                        buildMenu(value)
                    })
                }
            })
        }

        window.buildMenu = function (data) {
            var html = '<li lay-options={id:' + data.id + '}>';
            html += "<div class='layui-menu-body-title'>  <a href='javascript:;' onclick='monitor(" + data.id + ")'>" +
                data.dbName + "</a></div></li>"
            $("#menu").append(html);
        }
        initDb()


        window.monitor = function (id) {
            console.log(id)
            $.get("http://localhost:9981/app/monitor?monitorId=" + id, function (res) {
                if (res.code == 200) {
                    var data = res.data;

                    var valueKeyArr = Object.keys(data);
                    for (let index = 0; index < valueKeyArr.length; index++) {
                        let key = valueKeyArr[index];
                        data[key].forEach((item => {
                            var name = item.field.name
                            var option = buildEcharts(key + "-----" + name)
                            option.series = []
                            let seriesData = [];
                            seriesData.push({
                                value: [item.timestamp, item.origin]
                            });
                            var html = " <div class='layui-row'>" +
                                "            <div class='layui-col-md12'>" +
                                "                <div id='" + name + "' class='main'></div>" +
                                "            </div>" +
                                "        </div>"
                            $("#main").append(html);
                            var myChart = echarts.init(document.getElementById(name));
                            option.series.push({
                                name: key,
                                type: 'line',
                                stack: 'Total',
                                smooth: true,
                                showSymbol: false,
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: seriesData
                            })
                            myChart.setOption(option, {
                                replaceMerge: ['xAxis', 'yAxis', 'series']
                            });
                        }));
                    }

                    window.setTimeout(function () {
                        $.get("http://localhost:9981/app/monitor?monitorId=" + id, function (res) {
                            var data = res.data;
                            var valueKeyArr = Object.keys(data);
                            for (let index = 0; index < valueKeyArr.length; index++) {
                                let key = valueKeyArr[index];
                                data[key].forEach((item => {
                                    var name = item.field.name
                                    var chart = echarts.getInstanceByDom(document.getElementById(name))
                                    let seriesData = chart.getOption().series[0].data
                                    console.log(seriesData)
                                    seriesData.push({
                                        value: [item.timestamp, item.origin]
                                    });
                                    chart.setOption({
                                        series: [{
                                            data: seriesData
                                        }]
                                    });
                                }));
                            }
                        })
                    }, 5000)
                }
            })
        }

        /*        window.setInterval(function () {
                    const obj = randomData()
                    // console.log(obj)
                    //var obj={name:"a"+Math.round(10),value:["1997-11-04 10:10:17",Math.round(10)]}
                    if (60 < serdata.length) {
                        serdata.shift()
                    }
                    serdata.push(obj)
                    console.log(serdata)
                    myChart.setOption({
                        series: [{
                            data: serdata
                        }]
                    });
                }, 1000);*/

        window.buildEcharts = function (name) {
            return {
                title: {
                    text: name,
                    left: 'center'
                },
                xAxis: {
                    type: "time",
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: true
                    }
                }
            };

        }

        function randomData() {
            const now = new Date()
            var value = 10
            value = value + Math.random() * 21
            const obj = {
                name: now.toString(),
                value: [
                    now, Math.round(value)
                ]
            }
            return obj
        }

        form.on('submit(save)', function (data) {
            var field = data.field; // 获取表单字段值
            $.post("http://localhost:9981/app/addMonitor", field, function (res) {
                if (res.code == 200) {
                    layer.alert("新增成功", {
                        title: '提示'
                    }, function (index) {
                        buildMenu(res.data)
                        layer.close(index)
                    });
                } else {
                    layer.alert("新增失败", {
                        title: '提示'
                    });
                }
            })
            return false
        })

    })


    // 每一秒添加一个数据
    /* window.setInterval(function() {


         const obj = randomData()
         // console.log(obj)
         //var obj={name:"a"+Math.round(10),value:["1997-11-04 10:10:17",Math.round(10)]}
         if(60 < data1.length) {
             data1.shift()
         }
         data1.push(obj)
         myChart.setOption({
             series: [{
                 data: data1
             }]
         });
     }, 1000);*/

</script>
</body>
</html>
